<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>

        /* 
            浅拷贝
                1- lodash  clone
                2- 展开运算符--- lisi = { ...zhangsan };  [...arr] *** (常用)
                3-clone 遍历 对象的所有属性， 把属性 都添加到一个 新对象中 
        */
        var zhangsan = {
            name: "zhangsan",
            age: 18,
            child: { name: "张三丰", child: { name: "张四" } },
        };
        var arr = [{ name: 'zhangsan' }, { name: 'lisi' }]
        /* 
        
          var zhangsan = {
            name: "zhangsan",
            age: 18,
            child: 001,
        };
        */


        // 创建一个 value 的浅拷贝
        // var lisi = _.clone(zhangsan);
        // console.log(lisi);


        // 展开运算符-- 把 zhangsan力里面的属性 都直接放入 lisi对象里
        // var lisi = { ...zhangsan };



        function clone(obj) {
            // 遍历 obj 的所有属性， 把属性 都添加到一个 新对象中 
            var newObj = {}
            for (var key in obj) {
                //key 属性名
                // obj[key] 属性值
                var value = obj[key];

                // 把属性 都添加到一个 新对象中 
                newObj[key] = value;

            }
            // 返回这个新对象
            return newObj

        }

        let lisi = clone(zhangsan)


        // 

        console.log(lisi === zhangsan);//false
        console.log(lisi.child === zhangsan.child);//true
        console.log(lisi.child.child === zhangsan.child.child);//true


        // 浅拷贝数组
        // var arr2 = _.clone(arr);
        var arr2 = [...arr];
        console.log(arr2);
        console.log(arr);

        console.log(arr === arr2);//false
        console.log(arr[0] === arr2[0]);//true






    </script>

</body>

</html>